<template>
  <transition  name="slide">
    <div class="app-oil-data">
      <section class="app-main">
        <mt-cell class="module-type" title="当前账目" @click.native="handleChangeType">平台账目</mt-cell>
        <table class="data-list row">
          <tr>
            <td class="item col-xs-6">
              <span class="item-title">账户余额</span>
              <div class="item-body">
                <span class="price-mark">￥</span><span class="item-count" v-text="orderCount.num"></span>
              </div>
            </td>
            <td class="item col-xs-6">
              <span class="item-title">可提金额</span>
              <div class="item-body">
                <span class="price-mark">￥</span><span class="item-count" v-text="moneyCount.num"></span>
              </div>
            </td>
          </tr>
        </table>
        <div class="button-content">
          <button class="btn" @click="handleGoForward">取款</button>
          <div class="tips">
            <span class="addon">提现说明：</span>
            <template v-if="storeType==1">保险工单营业额T+1天入账，其它工单T+30天入账；</template>
            每日均可提现已入账金额，申请提现后1~2个工作日内直接打入申请银行卡。
          </div>
        </div>
        <div class="record-content">
          <div class="title">交易记录</div>
          <ul class="record-list"
              v-infinite-scroll="loadMore"
              infinite-scroll-disabled="loading"
              infinite-scroll-distance="10">
            <li class="item" v-for="item in dataList">
              <div class="item-header">{{item.settleBillType}}</div>
              <div class="item-date">业务名称：{{item.businessTypeName}}</div>
              <div class="item-date">交易时间：{{item.businessDate}}</div>
              <div class="item-date" v-if="item.businessBillNo">业务单号：{{item.businessBillNo}}</div>
              <!--<div class="item-state">状态：<span>{{item.statusStr}}</span></div>-->
              <!--<span class="money money-add" v-if="item.statusStr=='已拒绝' || item.title=='销售金额' || item.title=='销售奖励' || item.title=='服务收入' || item.title=='玻璃维修收入'">+{{item.amount}}¥</span>-->
              <!--<span class="money money-reduce" v-if="item.title=='提现申请' || item.title=='退货退款' || item.title=='平台服务费'">{{item.amount}}¥</span>-->
              <!--<span class="money money-reduce" v-if="item.title=='提现审核' && item.statusStr=='已完成'">{{item.amount}}¥</span>-->
              <span class="money money-add" v-if="(item.incomeAmt-item.expendAmt)>=0">+{{item.incomeAmt-item.expendAmt}}¥</span>
              <span class="money money-reduce" v-else>{{item.incomeAmt-item.expendAmt}}¥</span>
            </li>
          </ul>
        </div>
      </section>

      <div class="line-scale-pulse-out" v-show="loading">
        <div class="loader-item"></div>
        <div class="loader-item"></div>
        <div class="loader-item"></div>
        <div class="loader-item"></div>
        <div class="loader-item"></div>
      </div>
      <div class="load-finish-tips" v-if="loadTips">
        已加载完成
      </div>
    </div>
  </transition>
</template>

<script>
  import { Header,Cell,Toast } from 'mint-ui';
//  Vue.component(Header.name, Header);
export default {
  components:{
    Header,
    Cell,
  },
  data () {
    return {
      storeUser:'',
      storeName:'',
      storeOrderDate:'',
      orderCount:{
        num:'0',
        add:'0'
      },
      moneyCount:{
        num:'0',
        add:'0'
      },
      predictCount:{
        num:'0',
        add:'0'
      },
      loading:false,
      page:1,
      total:0,
      loadTips:false,
      dataList:[],
      storeType:1,
      userRole:'',
    }
  },
  created(){

//    this.dataList=[{
//      title:'玻璃维修收入',
//      applydate:'2019-05-22',
//      businessSN:'5840943904393',
//      amount:'400',
//      statusStr:'已到账'
//    },{
//      title:'玻璃维修收入',
//      applydate:'2019-05-22',
//      businessSN:'5840943904393',
//      amount:'400',
//      statusStr:'已到账'
//    },{
//      title:'玻璃维修收入',
//      applydate:'2019-05-22',
//      businessSN:'5840943904393',
//      amount:'400',
//      statusStr:'已到账'
//    },]

    /**获取余额**/
    var params = new URLSearchParams();
    this.$axios({
      method: 'post',
      url:'gp/app/userFront!getAccountBooksList.do',
      data:params
    }).then((res)=>{
      console.log(res)
    this.orderCount.num=res.data.rows[0].balanceAmt;
    this.moneyCount.num=res.data.rows[0].currFund;

    //    获取交易记录
    var params = new URLSearchParams();
    params.append('page', this.page);
    params.append('bookId', res.data.rows[0].accountBookId);
    this.$axios({
      method: 'post',
      url:'gp/app/userFront!getAccountBodyList.do',
      data:params
    }).then((res)=>{
      this.dataList=res.data.rows;
      this.total=res.data.total;
  });
  })



  },
  methods:{
    loadMore() {
      if(this.total==0){
        return false;
      }
      if(this.dataList.length<this.total){
        this.loading = true;
        this.page++;
        var params = new URLSearchParams();
        params.append('page', this.page);
        this.$axios({
          method: 'post',
          url:'gp/app/userFront!getAccountBodyList.do',
          data:params
        }).then((res)=> {
          for(var i=0;i<res.data.rows.length;i++){
          this.dataList.push(res.data.rows[i]);
        }
      });
     setTimeout(() => {
        this.loading = false;
      },1500);
      }else{
        this.loadTips=true;
      }
    },
    handleGoForward(){
      const myDate = new Date();
      if(this.storeType==1){
        this.$router.push({path:'/bank-information'})
//        if(myDate.getDate()=='20' || myDate.getDate()=='21' || myDate.getDate()=='22' || myDate.getDate()=='23' || myDate.getDate()=='24' || myDate.getDate()=='25'){
//          this.$router.push({path:'/bank-information'})
//        }else{
//          Toast({
//            message: '每月20~25号为提现日哦！',
//            position: 'middle',
//            duration:1500
//          });
//        }
      }else{
        this.$router.push({path:'/bank-information'})
      }
    }
  }
}
</script>
<style>
  .app-oil-data{
    padding:0 0 12px;
  }
  .app-oil-data .app-main{
    padding:0 0 12px;
  }
  .app-oil-data .module-type{
    margin:0 0 16px;
  }
  .app-oil-data .module-info {
    background: #fff;
    margin: 0 0 12px;
    padding: 12px 16px;
    font-size:15px;
  }
  .app-oil-data .module-info .item {
    padding: 0 0 4px;
  }
  .app-oil-data .module-info .item-addon {
    color: #888;
  }
  .price-mark{
    font-size: 16px;
  }
  .app-oil-data .data-list {
    background: #fff;
    width: 100%;
    margin: 0 0 12px;
    padding:0;
  border-collapse: collapse}
  .app-oil-data .data-list .item {
    position: relative;
    width: 50%;
    padding:24px 6px 13px;
    font-size:28px;
    text-align: center; }
  .app-oil-data .data-list .item:nth-of-type(2n) {
    border-left:1px solid #ddd;

  }
  .app-oil-data .data-list .item-title {
    display: block;
    font-size:16px; }
  .app-oil-data .data-list .item-count {
    display: inline-block;
    vertical-align: middle;
    font-size:25px;
    color: #333;
    font-weight: bold;
    margin-right:5px;
    line-height:55px; }
  .app-oil-data .data-list .item-add {
    display: inline-block;
    vertical-align: middle; }
  .app-oil-data .data-list .add-count {
    display: block;
    font-size:16px;
    color: #ef3b3c;
    font-weight: bold;
    letter-spacing: 0px; }
  .app-oil-data .data-list .add-tips {
    display: block;
    font-size:16px;
    color: #aaa; }
  .app-oil-data .button-content {
    padding:20px 30px; }
  .app-oil-data .button-content .btn {
    background: #007EE5;
    display: block;
    width: 100%;
    outline: none;
    padding:10px 0;
    border: none;
    color:#fff;
    font-size:16px;
    font-family: "Microsoft YaHei";
    border-radius: 50px;
    text-align: center;
  }
  .app-oil-data .button-content .tips {
    position: relative;
    text-align: left;
    padding-top:12px;
    padding-left:60px;
    margin: 0 0 13px;
    font-size:12px;
    color: #999;
    line-height:17px; }
  .app-oil-data .button-content .addon {
    position: absolute;
    left: 0;
  }
  .app-oil-data .record-content {
    background: #fff;
    padding:16px 12px 0; }
  .app-oil-data .record-content .title {
    padding: 0 0 15px;
    text-align: center;
    font-size:13px;
    color: #999; }
  .app-oil-data .record-content .item {
    position: relative;
    padding:18px 0;
    border-top: 1px solid #eee; }
  .app-oil-data .record-content .item-header {
    margin: 0 0 12px;
    font-size:16px;
    color: #333; }
  .app-oil-data .record-content .item-date {
    font-size:13px;
    color: #999;
    line-height:19px; }
  .app-oil-data .record-content .item-state {
    line-height:19px;
    font-size:13px;
    color: #999; }
  .app-oil-data .record-content .item-red {
    color: #ef3b3c; }
  .app-oil-data .record-content .money {
    position: absolute;
    top:40px;
    right:21px;
    font-size:18px; }
  .app-oil-data .record-content .money-add {
    color: #ef3b3c; }
  .app-oil-data .record-content .money-reduce {
    color: #666; }

  .load-finish-tips{
    padding:8px 0 10px;
    font-size: 14px;
    color:#666;
    text-align: center;
  }
  .load-finish-tips:before{
    display: inline-block;
    vertical-align: middle;
    width:40px;
    height: 1px;
    background-color: #bbb;
    content: '';
    margin-right:6px;
  }
  .load-finish-tips:after{
    display: inline-block;
    vertical-align: middle;
    width:40px;
    height: 1px;
    background-color: #bbb;
    content: '';
    margin-left:6px;
  }
</style>
